<template>
    <div id="userSet" >
        <el-form ref="table" :model="table" label-width="150px" :rules="tableRules">
            <el-form-item label="账号">
                <el-input v-model="table.username" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="nickName">
                <el-input v-model="table.nickName"></el-input>
            </el-form-item>
            <el-form-item label="用户头像">
                <el-upload
                        class="avatar-uploader"
                        :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload" :headers="MyHeaders">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar"  style="border-radius: 50%;overflow: hidden">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="修改密码">
                <el-input v-model="table.password" placeholder="请输入您要修改的密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input v-model="table.password_confirm" placeholder="请再次输入您要修改的密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="editUser">立即修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {userSettingInfo,userSettingUpdate} from "../../api/api"
    export default {
        data() {
            return {
                table: {
                    password: '',
                    password_confirm: ''
                },
                MyHeaders: {'X-Authentication': JSON.parse(sessionStorage.getItem('user'))},
                imageUrl: '',
                tableRules: {
                    nickName: {required: true, message: '请输入名称', trigger: 'blur'},
                },
            }
        },
        methods: {
            userSetting(){
                let para = {};
                userSettingInfo(para).then(res => {
                    console.log(res);
                    this.table = res.data;
                    this.imageUrl = res.data.avatar;
                })
            },
            handleAvatarSuccess(file) {
                console.log(file);
                this.table.avatar = file.data.path;
                this.imageUrl = file.data.pathFull;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG/png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            editUser(){
                console.log(this.table);
                userSettingUpdate(this.table).then(res => {
                    console.log(res);
                    if(res.code === 20000){
                        this.$message({message: res.message, type: 'success'});
                        setTimeout(()=> {
                            if(res.data){
                                this.$router.push({path: '/login'});
                            }else{
                                sessionStorage.setItem('userName', '"'+this.table.nickName+'"');
                                sessionStorage.setItem('userImg', '"'+this.imageUrl+'"');
                                window.location.reload();
                            }
                        },500)
                    }else{
                        this.$message({message: res.message, type: 'error'});
                    }

                })
            }
        },
        mounted(){
            this.userSetting();
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #userSet{
        .toolbar{
            text-align: left;
        }
        .homeType {
            width: 100%;
            height: 100%;
            cursor: pointer;
            padding: 1px;
        }
        .mainImg {
            width: 50px;
            height: 50px;
        }
        .iconImg {
            cursor: pointer;
            img {
                vertical-align: middle;
                padding: 20px;
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #20a0ff;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .elRow{
            .text-left{
                text-align: right;
            }
            .elCol{
                line-height: 36px;
                margin-bottom: 20px;
                :last-of-type{
                    margin-bottom: 0;
                }
                .addButton{
                    width: 100%;
                }
                .elOption{
                }
                .el-input{
                    width: 100%;
                }
            }
        }
    }
</style>